import { PureComponent } from "react";
import { SearchBar,Carousel,Grid,Flex,TabBar,Button} from "antd-mobile"
import { ActivityIndicator } from 'antd-mobile';
import { connect } from 'dva';
import { Row, Col } from 'antd';
import { handleImg, goToPage,isNull,handleOSS } from "../../utils/helper";
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
import MToast from '../../components/Util/MToast';
@connect(() => {
  return ({

  })
})
export default class MelaShop extends PureComponent{
  constructor(props){
    super(props);
    this.state = {
      carouselItem:[],
      loading:true,
      goodsItem:[],
      goodsItemObj:[],
      goodsItemObj1:[],
      goodsItemObj2:[],
      selectedTab: 'redTab',
    }
  }
  componentWillMount(){
    let {dispatch,location} = this.props;
    dispatch({
      type: "form/query",
      payload: {
        apiInfo: {
          url: "qry/all?_c=app_banner_list",
          params: [
          ],
          _c: "app_banner_list"
        },
        callback: (result) => {
          let { data } = result;
          this.setState({
            carouselItem:data,
            loading:false,

          })
          console.log(data)

        }
      }
    });
    dispatch({
      type: "form/query",
      payload: {
        apiInfo: {
          url: "qry/all?_c=app_goods_list",
          params: [
          ],
          _c: "app_goods_list"
        },
        callback: (result) => {
          let { data } = result;
          console.log(data);
          // var goodsItem1=data.slice(0,3)
          // var goodsItem2=data.slice(3,6)
          // var goodsItem3=data.slice(6,9)
          // var goodsItem4=data.slice(9,12)
          this.setState({
            goodsItem:data,
            loading:false,

          })
        }
      }
    });

  }
  goodList() {
    let { goodsItem} = this.state;


    if (!goodsItem || goodsItem.length == 0) {
      return (
        <div style={{ padding: "40px 0", textAlign: "center", fontSize: "20px", color: "#555" }}>
          {T("No products(暂无商品)")}
        </div>
      )
    }
    else {
      let contents = [];
      return (
        <div className="box" style={{height:'100%',paddingBottom:'20%'}}>
          {goodsItem.map((i,k) => (
            <div  key={k} style={{background:'#fff',fontWeight:'bold',padding:'5% 5% 5%',borderRadius:'10px'}} className="item">
              <div onClick={(e)=>{this.handleDetail(e,i)}}>
                <img src={handleOSS(i.img_url)} style={{width:'100%',height:'100%'}}/>

              </div>
              <div style={{overflow:'hidden',margin:'20% 0px 0px'}}>
                <p className="ellipsis2" style={{margin:'12px 0px 0px',textAlign:'left',color:'#595867',fontSize:'13px',height:'35px'}}>{i.goods_name}</p>
                <div style={{float:'left',color:'#F09600',fontSize:'15px',marginTop:'5px'}}>€{i.price}</div>
                <div style={{float:'right',width:'34px',height:'34px'}} onClick={(e) => {this.handleAdd(e,i) }}>
                  <img src="image/cart1.png" style={{width:'32px',height:'32px'}}/>
                </div>
              </div>

              {/*<Button type="primary" size="small" inline style={{marginBottom:'1em'}} onClick={(e) => {this.handleAdd(e,i) }}>+ADD</Button>*/}
            </div>

          ))}
        </div>

      )
    }
  }
  handleDetail=(e,i)=>{
    let {dispatch} = this.props;
    goToPage({ dispatch, config: { url: "/goodsDetail?id="+i.id+"&store_id="+i.store_id }, isReplace: false })
  }
  handleAdd=(e,i)=>{
    // console.log(i);
    let {dispatch} = this.props;
    dispatch({
      type: "form/query",
      payload: {
        apiInfo: {
          url: "cart/add",
          params: [
            {
              key: "goods_id",
              value: i.id
            },
            {
              key: "goods_name",
                value: i.goods_name
            },
            {
              key: "img_url",
                value: i.img_url
            },
            {
              key: "price",
                value: i.price
            },
            {
              key: "quantity",
                value: 1
            }
          ]
        },
        callback: (result) => {
          let { data } = result;
       console.log(data)
            MToast.info(T("È stato aggiunto un nuovo articolo al tuo carrello.（商品已加入到购物车）",3, null, false));

        }
      }
    })
  }
  render(){
    let {dispatch} = this.props;
    let {carouselItem,goodsItem,goodsItemObj,loading} = this.state;
    if (loading) {
      return (
        <div className="normal">
          <ActivityIndicator toast text="正在加载" animating={true} />
        </div>
      )
    }
    return(
      <div style={{background:'rgb(249, 247, 247)'}}>
        <div maxLength={8} style={{position:'fixed',top:'2%',left:'10%',width:'80%',zIndex:'100',height:'40px',border:'1px solid #ddd',borderRadius:'15px',background:"#fff"}} onClick={()=>{goToPage({ dispatch, config: { url: "/searchPage" }, isReplace: false })}}>
          <div style={{position:'absolute',top:'25%',left:'5%'}}>
            <img src="image/search_24px.png" style={{width:'24px',height:'24px'}}/><span style={{color:'#C9C9C9',fontSize:'13px'}}>Nome、Codice a barre 名称、条码</span>
          </div>
        </div>
        <Carousel
          autoplay={true}
          infinite
          autoplayInterval={10000}
          speed={400}
        >
          {this.state.carouselItem.map((i,k) => (
            <a
              key={k}
              style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
            >
              <img
                src={handleOSS(i.url)}
                alt=""
                style={{ width: '100%', verticalAlign: 'top',height:'237px' }}
                onLoad={() => {
                  // fire window resize event to change height
                  this.setState({ imgHeight: '237px' });
                }}
              />
            </a>
          ))}
        </Carousel>
        <p style={{color:'#2E2D35',fontSize:'17px',margin:'16px 16px 0px'}}>Più venduti</p>
        {this.goodList()}
        <div style={{position:'fixed',bottom:'0px',left:'0px',width:'100%'}}>
          <TabBar
          unselectedTintColor="#949494"
          tintColor="#F09600"
          barTintColor="white"
          hidden={this.state.hidden}
        >
          <TabBar.Item
            title="首页"
            key="Life"
            icon={<div style={{
              width: '24px',
              height: '24px',
              background: 'url(image/home2.png) center center /  21px 21px no-repeat' }}
            />
            }
            selectedIcon={<div style={{
              width: '24px',
              height: '24px',
              background: 'url(image/home3.png) center center /  21px 21px no-repeat' }}
            />
            }
            selected={this.state.selectedTab === 'redTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'redTab',
              });
              goToPage({ dispatch, config: { url: "/shop_home" }, isReplace: false })
            }}
            data-seed="logId"
          >

          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{
                width: '24px',
                height: '24px',
                background: 'url(image/category.png) center center /  21px 21px no-repeat' }}
              />
            }
            selectedIcon={
              <div style={{
                width: '24px',
                height: '24px',
                background: 'url(image/category1.png) center center /  21px 21px no-repeat' }}
              />
            }
            title="分类"
            key="Koubei"

            selected={this.state.selectedTab === 'blueTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'blueTab',
              });
              goToPage({ dispatch, config: { url: "/category" }, isReplace: false })
            }}
            data-seed="logId1"
          >

          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{
                width: '24px',
                height: '24px',
                background: 'url(image/cart4.png) center center /  21px 21px no-repeat' }}
              />
            }
            selectedIcon={
              <div style={{
                width: '24px',
                height: '24px',
                background: 'url(image/cart5.png) center center /  21px 21px no-repeat' }}
              />
            }
            title="购物车"
            key="Friend"
            selected={this.state.selectedTab === 'greenTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'greenTab',
              });
              goToPage({ dispatch, config: { url: "/goodcart" }, isReplace: false })
            }}
          >
          </TabBar.Item>
          <TabBar.Item
            icon={{ uri: 'image/my.png' }}
            selectedIcon={{ uri: 'image/my1.png' }}
            title="我的"
            key="my"
            selected={this.state.selectedTab === 'yellowTab'}
            onPress={() => {
              this.setState({
                selectedTab: 'yellowTab',
              });
              goToPage({ dispatch, config: { url: "/my" }, isReplace: false })
            }}
          >
          </TabBar.Item>
        </TabBar></div>

      </div>
    )
  }
}
